import React, { useRef, memo } from 'react';
import { Drawer } from 'antd';

import styles from './index.module.less';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { globalState, showSettingsState } from '@/store/global';

export interface RightPanelProps {
  children: React.ReactNode;
}

const RightPanel = memo(
  ({ children }: RightPanelProps) => {
    console.log('render RightPanel');
    const setGlobalState = useSetRecoilState(globalState);
    const showSettings = useRecoilValue(showSettingsState);
    const rightPanel = useRef(null);

    const onClose = () => {
      setGlobalState((prevState) => ({ ...prevState, showSettings: false }));
    };

    return (
      <div ref={rightPanel} className={styles.rightPanel}>
        <Drawer
          className={styles.rightDrawContainer}
          title=''
          placement='right'
          closable={true}
          forceRender={true}
          open={showSettings}
          onClose={onClose}
        >
          {children}
        </Drawer>
      </div>
    );
  },
  () => true,
);

export default RightPanel;
